<template>
  <el-form :model="model" ref="douPayForm" :inline="true" label-width="72px" :label-position="'left'" >
    <el-row class="search-title">条件搜索</el-row>
    <el-form-item prop="parkno">
      <el-input prefix-icon="el-icon-search" v-model="model.parkno" placeholder="停车流水号" clearable></el-input>
    </el-form-item>
    <el-form-item> <el-button class="btn-search" type="primary"  @click="handleQueryDouPay">搜索</el-button></el-form-item>
    <collapse-vertical>
      <div v-show="isDisplay">
        <div>
    <el-form-item prop="datetype" label="日期类型">
      <el-radio-group v-model="model.datetype" size="small">
        <el-radio   v-for="item in datetypes" :label="item.value" >{{item.label}}</el-radio>
      </el-radio-group>
    </el-form-item>
        </div>
        <div>
    <el-form-item prop="auditstate" label="审核状态" >
      <el-radio-group v-model="model.auditstate" size="small">
        <el-radio   v-for="item in auditstates" :label="item.id" >{{item.value}}</el-radio>
      </el-radio-group>
    </el-form-item>
        </div>
        <el-form-item prop="rangeTime" label="日期范围">
          <el-date-picker
            v-model="model.rangeTime" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd" format="yyyy 年MM 月dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="btn-mini-form"  @click="handleQueryDouPay"
                     size="mini" >提交
          </el-button>
          <el-button class="btn-mini-form"  @click="handleResetDouPay"
                     size="mini" >重置
          </el-button>
        </el-form-item>
      </div>
    </collapse-vertical>
    <el-row style="text-align: center"><el-button style="border: none;background-color: transparent" size="small" @click="isShow" :icon="isDisplay?'el-icon-arrow-up':'el-icon-arrow-down'"></el-button></el-row>

    <!--<el-form-item>-->
      <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleQueryDouPay" type="primary"-->
                 <!--icon="el-icon-search">查询-->
      <!--</el-button>-->
      <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleResetDouPay" type="danger"-->
                 <!--icon="el-icon-refresh">重置-->
      <!--</el-button>-->
    <!--</el-form-item>-->
  </el-form>
</template>

<script>
  /* eslint-disable */
  import {selDictonary} from "../../../api/dictionary";
  import CollapseVertical from '../../../utils/collapseVertical'

  export default {
    name: "dou-payment-form",
    components: {CollapseVertical},
    created(){
      selDictonary().then(res => {
        for(var item in res){
          if(res[item].id=="auditstate"){
            this.auditstates=res[item].comboboxDetailList
          }
        }
      })
    },
    data(){
      return{
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        isDisplay:false,
        model: {
          rangeTime: [],
          account_no:'',
          datetype:'',
          auditstate: ''
        },

        datetypes:[
          {value:'1',label:'交易时间'},
          {value:'2',label:'数据生成时间'}
        ],
        auditstates:[]
      }
    },
    methods:{
      handleQueryDouPay() {
        this.$emit('handleQueryDouPay', this.model)
      },
      handleResetDouPay() {
        this.$refs['douPayForm'].resetFields()
      },
      isShow(){
        this.isDisplay =!this.isDisplay
      }

    }

  }
</script>

<style scoped>

</style>
